import React, { Component } from 'react';
import { Transfer, Switch } from 'antd';
import { arrUnique } from '@/components/arrUnique';

const allCode = []
const selectList = []
const selectLists = []
const allLists = []
const currentList = []

class TransferA extends Component{
  constructor(props) {
    super(props);
    this.state = {
      // targetKeys: oriTargetKeys,
      allCode: [],
      selectedKeys: [],
      select1: [],
      select2: [],
      select3: [],
      selectList: [],
      allLists: [],
      targetKeys: [],
      currentList: []
    };
  }

  // filterOption = (inputValue, option) => option.key > 4;

  componentDidMount(){
  }
  
  componentWillReceiveProps(nextProps){
    console.log('Props!!!!!!!', nextProps)

    const currentList = []
    const allCode = []
    const select1 = []
    const select2 = []
    const select3 = []

    nextProps.allCode.map((item) => {
      allCode.push({
        key: item.id,
        title: item.name
      })
    })
    this.setState({
      allCode: allCode
    })

    nextProps.select1.map((item) => {
      select1.push({
        key: item.id,
        title: item.name
      })
      allLists.push({
        key: item.id,
        title: item.name
      })
    })

    nextProps.select2.map((item) => {
      select2.push({
        key: item.id,
        title: item.name
      })
      allLists.push({
        key: item.id,
        title: item.name
      })
    })

    nextProps.select3.map((item) => {
      select3.push({
        key: item.id,
        title: item.name
      })
      allLists.push({
        key: item.id,
        title: item.name
      })
    })

    if(nextProps.currentIndex === 1){
      this.state.selectList = select1
      this.setState({
        selectList: select1,
        allLists: arrUnique(allLists, 'key')
      })
    }else if(nextProps.currentIndex === 2){
      this.state.selectList = select2
      this.setState({
        selectList: select2,
        allLists: arrUnique(allLists, 'key')
      })
    }else if(nextProps.currentIndex === 3){
      this.state.selectList = select3
      this.setState({
        selectList: select3,
        allLists: arrUnique(allLists, 'key')
      })
    }

    
    // this.state.selectList.map((item) => {
    //   this.state.targetKeys.map((key) => {
    //     if(item.key === key){
    //       currentList.push({
    //         key: item.key,
    //         title: item.title
    //       })
    //     }
    //   })
    // })
    // this.state.currentList = currentList
  }

  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys });

    console.log('targetKeys: ', nextTargetKeys);
    console.log('direction: ', direction);
    console.log('moveKeys: ', moveKeys);
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });

    console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    console.log('targetSelectedKeys: ', targetSelectedKeys);
  };

  // handleScroll = (direction, e) => {
  //   console.log('direction:', direction);
  //   console.log('target:', e.target);
  // };

  render() {
    const { targetKeys, selectedKeys, select1, select2, select3, currentIndex, selectList, allLists, currentList } = this.state;
    // console.log('selectList', selectList)
    // console.log('targetKeys', targetKeys)
    // console.log('selectedKeys', selectedKeys)
    // console.log('allLists', allLists)
    return (
      <div>
        <Transfer
          dataSource={selectList}
          showSearch // 显示搜索
          // filterOption={this.filterOption}  // 条件过滤
          titles={['待选货物类型', '已选货物类型']} //上方标题
          targetKeys={targetKeys} // 右侧已选项的key
          selectedKeys={selectedKeys} // 当前勾选的选项key
          onChange={this.handleChange}  // 移动时触发
          onSelectChange={this.handleSelectChange}  // 勾选和移动时触发
	        style={{ float: "right", marginLeft: "50px", height:350, fontSize: 12 }}
          // onScroll={this.handleScroll}
          render={item => item.title} // 渲染的文字
	        listStyle={{ height: 350 }}
        />
      </div>
    )
  }
}

export default TransferA;
